<!DOCTYPE html>
<html>
<head>

    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>PIE CSS3 Quick Demo</title>

    <style type="text/css">
        #demo {
            width: 600px;
            border: 1px solid #CCC;
            padding: 20px 20px 0;
            position: relative;
            font-size: 11px;
            font-family: sans-serif;
        }

        #target {
            position: absolute;
            left: 20px;
            top: 20px;
            width: 200px;
            text-align: center;
            padding: 60px 0;
            background: #EEE;
            border: 1px solid #999;
            font-size: 18px;

            /* default CSS3 values: */
            /*-webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            -webkit-box-shadow: #666 0 2px 3px;
            -moz-box-shadow: #666 0 2px 3px;
            box-shadow: #666 0 2px 3px;
            background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393));
            background: -webkit-linear-gradient(#9F9, #393);
            background: -moz-linear-gradient(#9F9, #393);
            background: -ms-linear-gradient(#9F9, #393);
            background: -o-linear-gradient(#9F9, #393);
            -pie-background: linear-gradient(#9F9, #393);*/
        }

        #controls {
            margin: 0 0 20px 220px;
        }

        #controls input {
            font-family: monospace;
            font-size: 1em;
        }

        #controls fieldset {
            border: 1px solid #CCC;
            padding: 3px 10px 5px;
            margin: 0 0 10px;
        }

        #controls fieldset legend {
            line-height: normal;
            color: #000;
        }

        #controls fieldset fieldset {
            margin: 0 0 5px;
            padding-left: 5px;
            line-height: 25px;
        }

        #controls ul, #controls li {
            display: block;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #controls .toggle {
            float: left;
        }
        #controls .details {
            float: right;
        }
        #controls .details label {
            margin-left: 2px;
        }

        .colorPicker {
            position: absolute;
            margin-top: 20px;
            border: 1px solid #CCC;
            background: #FFF;
        }

        #output {
            display: block;
            border: 1px solid #CCC;
            background: #EEE;
            margin: 0 0 20px;
            padding: 20px;
            white-space: pre;
        }
    </style>

    <link href="farbtastic/farbtastic.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="farbtastic/farbtastic.min.js"></script>

    <script type="text/javascript">
        $( function() {

            var loaded = false,
                behaviorId,
                behaviorUrl = '../build/PIE.htc';

            function getBorderRadiusCss() {
                var on = $( '#borderRadiusToggle' ).is(':checked'),
                    size = $( '#borderRadiusSize' ).val();
                return on ? [ '-webkit-border-radius: ' + size + 'px;', '-moz-border-radius: ' + size + 'px;', 'border-radius: ' + size + 'px;' ] : []
            }

            function getBoxShadowCss() {
                var on = $( '#boxShadowToggle' ).is(':checked'),
                    x = $( '#boxShadowX' ).val(),
                    y = $( '#boxShadowY' ).val(),
                    blur = $( '#boxShadowBlur' ).val(),
                    cssVal = on ? '#666 ' + x + 'px ' + y + 'px ' + blur + 'px;' : '';
                return cssVal ? [ '-webkit-box-shadow: ' + cssVal, '-moz-box-shadow: ' + cssVal, 'box-shadow: ' + cssVal ] : [];
            }

            function getGradientCss() {
                var on = $( '#gradientToggle' ).is(':checked'),
                    color1 = $( '#gradientColor1' ).val(),
                    color2 = $( '#gradientColor2' ).val(),
                    css = [ 'background: ' + color1 + ';' ];
                if( on ) {
                    css.push( 'background: -webkit-gradient(linear, 0 0, 0 bottom, from(' + color1 + '), to(' + color2 + '));' );
                    css.push( 'background: -webkit-linear-gradient(' + color1 + ', ' + color2 + ');' );
                    css.push( 'background: -moz-linear-gradient(' + color1 + ', ' + color2 + ');' );
                    css.push( 'background: -ms-linear-gradient(' + color1 + ', ' + color2 + ');' );
                    css.push( 'background: -o-linear-gradient(' + color1 + ', ' + color2 + ');' );
                    css.push( 'background: linear-gradient(' + color1 + ', ' + color2 + ');' );
                    if( $( '#pieToggle' ).is(':checked') ) {
                        css.push( '-pie-background: linear-gradient(' + color1 + ', ' + color2 + ');' );
                    }
                }
                return css;
            }

            function updateCss() {
                var tgtEl = $( '#target' )[0],
                    css = [ 'border: 1px solid #696;', 'padding: 60px 0;', 'text-align: center; width: 200px;' ].concat( getBorderRadiusCss() ).concat( getBoxShadowCss() ).concat( getGradientCss() );

                if( $( '#pieToggle' ).is(':checked') ) {
                    css.push( 'behavior: url(' + behaviorUrl + ');' );
                }
                $( '#output' ).html( css.join( '<br>' ) );

                tgtEl.style.cssText = css.join( '' );

                if( tgtEl.addBehavior ) {
                    if( $( '#pieToggle' ).is(':checked') ) {
                        if( !behaviorId ) {
                            behaviorId = tgtEl.addBehavior( behaviorUrl );
                        }
                    }
                    else if( behaviorId ) {
                        tgtEl.removeBehavior( behaviorId );
                        behaviorId = null;
                    }
                }
            }

            function updateDetailsVis() {
                $( '#controls .toggle > input' ).each( function() {
                    var checked = this.checked,
                        deets = $( this ).closest( 'fieldset' ).find( '.details' );
                    if( loaded ) {
                        deets[ checked ? 'fadeIn' : 'fadeOut' ]( 'fast' );
                    } else {
                        deets[ checked ? 'show' : 'hide' ]();
                    }
                } );
            }

            function updateCodeVis() {
                var checked = $( '#codeToggle' ).is( ':checked' ),
                    code = $( '#output' );
                if( loaded ) {
                    code[ checked ? 'slideDown' : 'slideUp' ]( 'fast' );
                } else {
                    code[ checked ? 'show' : 'hide' ]();
                }
            }

            $( '#controls input' ).change( updateCss );
            $( '#controls .toggle > input' ).change( updateDetailsVis );
            $( '#codeToggle' ).change( updateCodeVis );

            $( '#controls input.color' ).each( function() {
                var inp = $( this ),
                    picker = $( '<div class="colorPicker"/>' ),
                    farb = $.farbtastic( picker, function( c ) {
                        if( c ) {
                            inp[0].value = c.toUpperCase();
                            inp.change();
                        }
                    } );

                inp.focus( function() {
                    farb.setColor( this.value );
                    picker.css( inp.position() ).fadeIn();
                    $( document ).bind( 'mousedown', function handler() {
                        picker.fadeOut();
                        $( this ).unbind( 'mousedown', handler )
                    } );
                } );

                picker.insertAfter( inp ).hide().mousedown( function( e ) {
                    e.stopPropagation();
                } );
            } );

            updateCss();
            updateDetailsVis();
            updateCodeVis();
            loaded = true;
        } );
    </script>

</head>
<body>

    <h1>PIE CSS3 Quick Demo</h1>

    <p>Adjust the controls on the right and see the CSS3 in action. Remember, there are no images used at all!</p>
    
    <div id="demo">

        <div id="target">
            Mmmmm, pie.
        </div>

        <div id="controls">
            <fieldset id="featureControls">
                <legend>CSS3 features</legend>

                <fieldset>
                    <legend>border-radius</legend>

                    <div class="toggle">
                        <input type="checkbox" id="borderRadiusToggle" class="featureToggle" checked="checked" />
                        <label for="borderRadiusToggle">Enable</label>
                    </div>

                    <div class="details">
                        <label for="borderRadiusSize">Radius size:</label>
                        <!--<input type="number" id="borderRadiusSize" min="0" max="20" value="8" size="2" />-->
                        <input type="text" id="borderRadiusSize" value="8" size="3" />
                    </div>
                </fieldset>

                <fieldset>
                    <legend>box-shadow</legend>

                    <div class="toggle">
                        <input type="checkbox" id="boxShadowToggle" class="featureToggle" checked="checked" />
                        <label for="boxShadowToggle">Enable</label>
                    </div>

                    <div class="details">
                        <label for="boxShadowBlur">Blur size:</label>
                        <!--<input type="number" id="boxShadowBlur" min="0" max="10" value="3" size="2" />-->
                        <input type="text" id="boxShadowBlur" value="3" size="3" />

                        <label for="boxShadowX">X offset:</label>
                        <!--<input type="number" id="boxShadowX" min="-10" max="10" value="0" size="3" />-->
                        <input type="text" id="boxShadowX" value="0" size="3" />

                        <label for="boxShadowY">Y offset:</label>
                        <!--<input type="number" id="boxShadowY" min="-10" max="10" value="2" size="3" />-->
                        <input type="text" id="boxShadowY" value="2" size="3" />
                    </div>

                </fieldset>

                <fieldset>
                    <legend>linear-gradient</legend>

                    <div class="toggle">
                        <input type="checkbox" id="gradientToggle" class="featureToggle" checked="checked" />
                        <label for="gradientToggle">Enable</label>
                    </div>

                    <div class="details">
                        <label for="gradientColor1">Top color:</label>
                        <!--<input type="color" id="gradientColor1" value="#99FF99" size="7" />-->
                        <input type="text" class="color" id="gradientColor1" value="#99FF99" size="7" />

                        <label for="gradientColor2">Bottom color:</label>
                        <!--<input type="color" id="gradientColor2" value="#339933" size="7" />-->
                        <input type="text" class="color" id="gradientColor2" value="#339933" size="7" />
                    </div>
                </fieldset>
            </fieldset>
            
            <fieldset id="pieControls">
                <legend>Options</legend>
                <ul>
                    <li>
                        <input type="checkbox" id="pieToggle" checked="checked" />
                        <label for="pieToggle">Enable PIE (only affects IE)</label>
                    </li>
                    <li>
                        <input type="checkbox" id="codeToggle" />
                        <label for="codeToggle">Show CSS</label>
                    </li>
                </ul>
            </fieldset>
        </div>

        <code id="output">
            
        </code>
    </div>

</body>
</html>